<template>
  <FormDlg
    title="设备控制"
    @hide="onHide"
    @show="onShow"
    @submit="onSubmit"
    ref="dlg"
  >
    <div :class="{ 'form-group': true }">
      <div class="col-sm-7">
        <el-radio-group v-model="currentType" v-validate="'required'">
          <el-radio label="0">远程启动</el-radio>
          <el-radio label="1">录像</el-radio>
          <el-radio label="2">取消录像</el-radio>
          <el-radio label="3">布防</el-radio>
          <el-radio label="4">取消布防</el-radio>
          <el-radio label="5">报警复位</el-radio>
        </el-radio-group>
      </div>
    </div>
  </FormDlg>
</template>

<script>
import FormDlg from "components/FormDlg.vue";
import $ from "jquery";

export default {
  data() {
    return {
      form: this.defForm(),
      currentType: "",
      typeObj: {
        0: "/deviceReboot",
        1: "/start/video",
        2: "/stop/video",
        3: "/alarmSetguard",
        4: "/alarmResetguard",
        5: "/alarmReset",
      },
    };
  },
  components: {
    FormDlg,
  },
  methods: {
    defForm() {
      return {
        //deviceId: '',
        device: "",
        channel: "",
      };
    },
    onHide() {
      this.form = this.defForm();
      this.currentType = "";
      this.$emit("hide");
    },
    onShow() {
      this.errors.clear();
      this.$emit("show");
    },
    async onSubmit() {
      if (this.currentType === "") {
        this.$message({
          type: "error",
          message: "请选择控制类型",
        });
        return;
      }
      let url = this.typeObj[this.currentType];
      $.post(this.$store.state.baseUrl + url, this.form).then((res) => {
        if (!res.code) {
          this.$message({
            message: "指令发送成功",
            type: "success",
          });
          this.$refs["dlg"].hide();
          this.$emit("submit");
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
          return;
        }
      });
    },
    async show(data) {
      this.errors.clear();
      if (data) {
        Object.assign(this.form, data);
      }
      this.$nextTick(() => {
        this.$refs["dlg"].show();
      });
    },
  },
};
</script>

<style scoped>
.el-radio {
  width: 160px;
  margin-left: 30px;
}
.col-sm-7 {
  width: 100%;
}
</style>
